<template>
	<view>
		<view class="edgeInsetTop"></view>
		<view class="wanl-goods-comment">
			<wanl-empty text="没有找到任何记录" v-if="listData.length === 0 && status !== 'loading'"></wanl-empty>
			<view class="list radius-bock">
				<view class="item" v-for="item in listData" :key="item.id" @tap="goMovie(item.short.id,item.short_child.id)">
					<view class="top">
						<image :src="item.short.cover_url" mode="aspectFill"></image>
						<view class="history">看到{{item.num}}集,共{{item.all_count}}集</view>
					</view>
					<view class="title">{{item.short.name}}</view>
				</view>
				
			</view>
			<uni-load-more :status="status" :content-text="contentText" />
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	computed: { ...mapState(['user']) },
	data() {
		return {
			listData: [], //列表
			reload: false, //判断是否上拉
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'loading',
			contentText: {
				contentdown: ' ',
				contentrefresh: '加载中',
				contentnomore: ''
			}
		};
	},
	onLoad(option) {
		this.loadData();
	},
	onPullDownRefresh() {
		this.current_page = 1;
		this.reload = true;
		this.loadData();
	},
	onReachBottom() {
		//判断是否最后一页
		if (this.current_page >= this.last_page) {
			this.status = 'noMore';
		} else {
			this.reload = false;
			this.current_page = this.current_page + 1; //页码+1
			this.status = 'loading';
			this.loadData();
		}
	},
	methods: {
		goMovie(short_id,short_child_id){
			this.$wanlshop.to(`/pages/movie/show?id=${short_id}&shortChildId=${short_child_id}`);
		},
		async loadData() {
			//加载商品
			await uni.request({
				url: '/wanlshop/short/favoriteList',
				method: 'POST',
				success: res => {
					uni.stopPullDownRefresh();
					this.listData = this.reload ? res.data.data : this.listData.concat(res.data.data); //评论数据 追加
					this.current_page = res.data.current_page; //当前页码
					this.last_page = res.data.last_page; //总页码
					this.status = res.data.total == 0 ? 'noMore':'more';
				}
			});
		},
		//预览图片
		previewImage(image, index) {
			var imgArr = [];
			for (var item of image) {
				imgArr = imgArr.concat(this.$wanlshop.oss(item, 500));
			}
			uni.previewImage({
				urls: imgArr,
				current: imgArr[index],
				indicator: 'number'
			});
		}
	}
};
</script>

<style lang="scss">
	.list{
		padding: 25rpx;
		padding-bottom: 85rpx;
		
		.item{
			width: 216rpx;
			height: 280rpx;
			border-radius: 16rpx;
			position: relative;
			float: left;
			margin-bottom: 55rpx;
			margin-right: 25rpx;
			.title{
				font-weight: 500;
				font-size: 28rpx;
				position: absolute;
				bottom: -40rpx;
				width: 216rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1; /* 定义文本的最大行数 */
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.top{
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				image{
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
				}
				.history{
					width: 216rpx;
					height: 46rpx;
					background: rgba(0, 0, 0, 0.75);
					line-height: 46rpx;
					text-align: center;
					color: white;
					position: absolute;
					bottom: 0;
					font-size: 22rpx;
					border-bottom-left-radius: 16rpx;
					border-bottom-right-radius: 16rpx;
				}
			}
		}
		.item:nth-child(3n){
			margin-right: 0rpx;
		}
	}
	
</style>
